.viewport {
  position: relative;
  height: 100vh;
  background: #f4f4f4;
  .content {
    padding: 20rpx;
    background-color: #f4f4f4;
    padding-bottom: 200rpx;
    .address-box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100rpx;
      padding: 0 20rpx 0 80rpx;
      background: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/locate.png)
        20rpx center / 50rpx no-repeat #fff;
      background-color: #fff;
      border-radius: 10rpx;
      .user-box {
        view {
          font-size: 28rpx;
          color: #333;
          display: inline-block;
        }
        .user {
          margin-right: 10rpx;
        }
      }
      .address {
        font-size: 28rpx;
        color: #666;
      }

      &::after {
        content: '\e6c2';
        color: #666;
        font-family: 'erabbit' !important;
        position: absolute;
        right: 40rpx;
      }

      .tip {
        color: #333;
        font-size: 28rpx;
      }
    }

    .goods-box {
      margin: 20rpx 0;

      .good {
        display: flex;
        height: 190rpx;
        padding: 20rpx;
        background-color: #fff;
        border-top: 1px solid #eee;
        border-radius: 10rpx;
        .image {
          .pic {
            height: 150rpx;
            width: 150rpx;
            border-radius: 10rpx;
          }
        }
        .meta {
          display: flex;
          flex: 1;
          flex-direction: column;
          justify-content: space-between;
          padding-left: 20rpx;
          height: 150rpx;
          .name {
            width: 100%;
            line-height: 1;
            font-size: 28rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          .attrs {
            padding: 5rpx 10rpx;
            font-size: 24rpx;
            color: #888;
            background-color: #f7f7f8;
            border-radius: 5rpx;
          }
          .price-count {
            width: 100%;
            display: flex;
            justify-content: space-between;
            .price {
              font-size: 28rpx;

              .price-pay {
                color: #cf4444;
                margin-right: 10rpx;
              }

              .price-old {
                font-size: 24rpx;
                color: #999;
                text-decoration: line-through;
              }
              .symbol {
                display: inline-block;
                &::before {
                  content: '¥';
                  font-size: 24rpx;
                }
              }
            }

            .count {
              font-size: 28rpx;
            }
          }
        }
      }
    }

    .info {
      padding: 0 20rpx;
      margin-bottom: 20rpx;
      background-color: #fff;
      border-radius: 10rpx;
      .delivery {
        position: relative;
        height: 80rpx;
        width: 100%;
        .picker {
          padding-right: 20rpx;
          &::after {
            content: '\e6c2';
            color: #666;
            font-family: 'erabbit' !important;
            position: absolute;
            right: 0;
          }
        }
      }
      .notes {
        .input {
          flex: 1;
          color: #8f8e8e;
          text-align: right;
        }
      }
    }

    .price-info {
      padding: 0 20rpx;
      background-color: #fff;
      border-radius: 10rpx;
    }

    .common-item {
      display: flex;
      justify-content: space-between;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 28rpx;
      color: #333;
      .label {
        width: 240rpx;
        font-size: 28rpx;
      }
      .value {
        height: 80rpx;
        line-height: 80rpx;
        color: #8f8e8e;

        &.symbol {
          color: #333;
          &::before {
            content: '¥';
            font-size: 24rpx;
          }
        }
      }
    }
  }
  .toolbar {
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 160rpx;
    padding: 20rpx;
    background-color: #fff;
    border-top: 1px solid #eee;

    .total-price {
      color: #cf4444;
      font-size: 40rpx;
      &:before {
        content: '￥';
        font-size: 80%;
      }
    }
    .to-pay {
      width: 200rpx;
      height: 60rpx;
      padding: 0;
      margin: 0;
      font-size: 30rpx;
      line-height: 60rpx;
      text-align: center;
      color: #fff;
      border-radius: 50rpx;
      background-color: #27ba9b;
    }
  }
}
